import { getAtMeetingPeriodByPage } from '@/services/meeting/atMouthlyMeeting';
import { PlusOutlined } from '@ant-design/icons';
import {
  ModalForm,
  ProFormDateRangePicker,
  ProFormText,
  QueryFilter,
} from '@ant-design/pro-components';
import { Button, DatePicker, Form, Input, List, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './customer.less';
const Search = Input.Search;
const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';
const data = [
  { id: 1, title: 'Ant design Title 1' },
  { id: 2, title: 'Ant design Title 2' },
  { id: 3, title: 'Ant design Title 3' },
  { id: 4, title: 'Ant design Title 4' },
  { id: 5, title: 'Ant design Title 4' },
  { id: 6, title: 'Ant design Title 4' },
  { id: 7, title: 'Ant design Title 4' },
  { id: 8, title: 'Ant design Title 4' },
  { id: 9, title: 'Ant design Title 4' },
  { id: 10, title: 'Ant design Title 4' },
  { id: 11, title: 'Ant design Title 4' },
  { id: 12, title: 'Ant design Title 4' },
];

const columns = [
  {
    title: '客户名称',
    dataIndex: 'customerName',
    filters: [
      {
        text: '姓李的',
        value: '李',
      },
      {
        text: '姓胡的',
        value: '胡',
      },
      {
        text: '子菜单',
        value: '子菜单',
        children: [
          {
            text: '姓陈的',
            value: '陈',
          },
          {
            text: '姓王的',
            value: '王',
          },
        ],
      },
    ],
    // 指定确定筛选的条件函数
    // 这里是名字中第一个字是 value
    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '客户编码',
    dataIndex: 'customerCode',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '客户描述',
    dataIndex: 'customerDesc',
    filters: [
      {
        text: '南湖',
        value: '南湖',
      },
      {
        text: '西湖',
        value: '西湖',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
  },
  {
    title: 'CnocNumber',
    dataIndex: 'CnocNumber',
  },
  {
    title: 'responsibleBdPssSales',
    dataIndex: 'responsibleBdPssSales',
  },
  {
    title: '区域',
    dataIndex: 'region',
  },
  {
    title: '备注',
    dataIndex: 'Comments',
  },
];

const data2 = [
  {
    key: '1',
    name: '胡斌',
    age: 32,
    address: '南湖区湖底公园1号',
  },
  {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园12号',
  },
  {
    key: '3',
    name: '李大嘴',
    age: 32,
    address: '南湖区湖底公园123号',
  },
  {
    key: '4',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '5',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '6',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '7',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '8',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '9',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '10',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '11',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '12',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
  {
    key: '13',
    name: '李秀莲大嘴哥',
    age: 32,
    address: '西湖区湖底公园123号',
  },
];
function onChange(pagination, filters, sorter) {
  // 点击分页、筛选、排序时触发
  console.log('各类参数是', pagination, filters, sorter);
}

const customerOverView: React.FC<{}> = (props) => {
  const [isBackgroundColorSwitched, setIsBackgroundColorSwitched] = useState(false);
  const toggleBackgroundColor = () => {
    setIsBackgroundColorSwitched(!isBackgroundColorSwitched);
  };

  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const [row, setRow] = useState({});
  const [rows, setRows] = useState([]);
  const [form] = Form.useForm();

  const [grid, setGrid] = useState(true);

  const [mainVisit, setMainVisit] = useState(false);
  const [mainTitle, setMainTitle] = useState('新建');
  const handleSubmit = (values) => {
    let result = getAtMeetingPeriodByPage({
      current: 1,
      pageSize: 20,
      ...values,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  };

  useEffect(() => {
    let result = getAtMeetingPeriodByPage({
      current: 1,
      pageSize: 20,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  }, []);

  const mainSubmit = () => {};

  return (
    <div className={styles.father}>
      <div className={styles.top}>
        <div className={styles.top1}>
          <QueryFilter preserve={false} span={8} onFinish={handleSubmit}>
            <ProFormText name="meetingName" label="会议名称" />
            <ProFormDateRangePicker name="startDate" label="响应日期" />
            <ProFormDateRangePicker name="endDate" label="创建时间" />
          </QueryFilter>
        </div>
        <div className={styles.top2}>
          <List
            size="small"
            // header={<div>Header</div>}
            // footer={<div>Footer</div>}
            bordered
            dataSource={rows}
            renderItem={(item) => (
              <List.Item
                onClick={() => {
                  setRow(item);
                }}
                style={{ background: item.id === row.id ? '#999' : '' }}
              >
                <span>{item.meetingName}</span> {item.startDate} to {item.endDate}
              </List.Item>
              // <div
              //   style={{ backgroundColor: isBackgroundColorSwitched ? 'lightblue' : 'white' }}
              //   onClick={toggleBackgroundColor}
              // >
              //   {item}
              // </div>
            )}
          />
        </div>
      </div>
      <div className={styles.bottom}>
        <div style={{ marginBottom: 16 }}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setMainVisit(true);
              setMainTitle('新建');
            }}
          >
            增加客户
          </Button>
        </div>
        <div>
          <Table size="small" columns={columns} dataSource={data2} onChange={onChange} />
        </div>

        <ModalForm
          visible={mainVisit}
          title={mainTitle}
          form={form}
          onFinish={mainSubmit}
          modalProps={{
            destroyOnClose: true,
            onCancel: () => {
              setMainVisit(false);
            },
          }}
          layout={formLayoutType}
          grid={grid}
          rowProps={{
            gutter: [16, formLayoutType === 'inline' ? 16 : 0],
          }}
        >
          <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
          <ProFormText
            name="customerName"
            label="客户名称"
            colProps={{ md: 12, xl: 12 }}
            rules={[{ required: true, message: '请输入编码' }]}
          />
          <ProFormText name="customerCode" label="客户编码" colProps={{ md: 12, xl: 12 }} />

          <ProFormText name="customerDesc" label="客户描述" colProps={{ md: 12, xl: 8 }} />
          <ProFormText name="cnocNumber" label="cnocNumber" colProps={{ md: 12, xl: 8 }} />
          <ProFormText
            name="customerPotentialM"
            label="customerPotentialM"
            colProps={{ md: 12, xl: 8 }}
          />
          <ProFormText name="evaluationDate" label="evaluationDate" colProps={{ md: 12, xl: 8 }} />
          <ProFormText
            name="responsibleBdPssSales"
            label="responsibleBdPssSales"
            colProps={{ md: 12, xl: 8 }}
          />
          <ProFormText name="region" label="region" colProps={{ md: 12, xl: 8 }} />
          <ProFormText
            name="verticalIndustries"
            label="verticalIndustries"
            colProps={{ md: 12, xl: 8 }}
          />
          <ProFormText name="comments" label="comments" colProps={{ md: 12, xl: 8 }} />
        </ModalForm>
      </div>
    </div>
  );
};

export default customerOverView;
